import React from 'react'
import styles from './index.module.scss'

class Sticky extends React.Component {
  // constructor(){
  //   this.filterComponent = React.createRef()
  // }
  // 这两个语法是完全同等效果的
  filterComponent = React.createRef()
  boxComponent = React.createRef() //占位符

  componentDidMount () {
    window.addEventListener('scroll', this.scrollHandler)
  }

  componentWillUnmount () {
    window.removeEventListener('scroll', this.scrollHandler)
  }

  scrollHandler = () => {
    // console.log(1)
    const filterDOM = this.filterComponent.current
    const boxDOM = this.boxComponent.current
    // 被占位的元素的原来的高度
    const height = filterDOM.offsetHeight
    // console.log(filterDOM);
    // console.log(filterDOM.getBoundingClientRect());
    const { top } = boxDOM.getBoundingClientRect()
    if (top <= 0) {
      filterDOM.classList.add(styles.fixed)
      // boxDOM.classList.add(styles.show)
      // 有可能其他地方的高度不是40，而是100，为了适应更多的布局
      // boxDOM.style.height="100px"
      // 改为动态的，最符合我们的要求
      boxDOM.style.height = `${height}`
    } else {
      filterDOM.classList.remove(styles.fixed)
      // boxDOM.classList.remove(styles.show)
      // 有可能其他地方的高度不是40，而是100
      boxDOM.style.height = '0px'
    }
  }
  render () {
    return (
      <div>
        <div ref={this.boxComponent}></div>
        <div ref={this.filterComponent}>{this.props.children}</div>
      </div>
    )
  }
}

export default Sticky
